<template>
  <div class="app-container company">
    <div class="company-session">
      <div class="company-session__title">基本信息</div>
      <div class="company-session__content" style="margin-top: 32px">
        <div class="company-info">
          <div class="company-info__lt">
            <img :src="info.logo" class="user-avatar"/>
          </div>
          <div class="company-info__rt">
            <div class="company-info__title">{{ info.name }}</div>
            <div class="company-info__content">
              <div class="company-item">
                <div class="company-item__label">成立时间</div>
                <div class="company-item__value">{{ info.regTime }}</div>
              </div>
              <div class="company-item">
                <div class="company-item__label">企业类型</div>
                <div class="company-item__value">
                  <dict-tag
                    :options="dict.type.sys_company_type"
                    :value="info.type"
                  />
                </div>
              </div>
              <div class="company-item">
                <div class="company-item__label">注册资金</div>
                <div class="company-item__value">{{ info.capital }}</div>
              </div>
              <div class="company-item">
                <div class="company-item__label">法人代表</div>
                <div class="company-item__value">{{ info.legalPerson }}</div>
              </div>
              <div class="company-item">
                <div class="company-item__label">法人电话</div>
                <div class="company-item__value">{{ info.legalPhone }}</div>
              </div>
              <div class="company-item">
                <div class="company-item__label">营业执照</div>
                <div class="company-item__value">
                  <div
                    class="download-btn"
                    @click="handleDownFile(info.license)"
                  >
                    附件<i class="el-icon-paperclip"></i>
                  </div>
                </div>
              </div>
              <div class="company-item">
                <div class="company-item__label">统一社会信用代码</div>
                <div class="company-item__value"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="company-session">
      <div class="company-session__title">公司地址
        <el-button class="ml10" type="text" icon="el-icon-map-location" @click="mapVisible=true">编辑中心</el-button>
        <el-button class="ml10" type="text" icon="el-icon-place" @click="showMapArea()">编辑区域</el-button>
      </div>
      <div class="tips mb10">
        <p>
          <i></i>
          公司区域为公司固定职员考勤范围
        </p>
      </div>
      <div class="map-box">
        <div class="points-map" id="companyMap"></div>
      </div>
    </div>
    <div class="company-session">
      <div class="company-session__title">开票信息</div>
      <div class="company-session__content" style="margin-top: 16px">
        <div class="company-invoice">
          <div class="company-item">
            <div class="company-item__label">发票抬头</div>
            <div class="company-item__value">{{ info.invoiceTtitle }}</div>
          </div>
          <div class="company-item">
            <div class="company-item__label">单位地址</div>
            <div class="company-item__value">{{ info.address }}</div>
          </div>
          <div class="company-item">
            <div class="company-item__label">银行账户</div>
            <div class="company-item__value">{{ info.bankCode }}</div>
          </div>
          <div class="company-item">
            <div class="company-item__label">税务编号</div>
            <div class="company-item__value">{{ info.bankName }}</div>
          </div>
          <div class="company-item">
            <div class="company-item__label">开户银行</div>
            <div class="company-item__value">{{ info.bankName }}</div>
          </div>
        </div>
        <!--        <div class="company-invoice">-->
        <!--          <div class="company-item">-->
        <!--            <div class="company-item__label">备注内容</div>-->
        <!--            <div class="company-item__value">{{ info.invoiceRemark }}</div>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>
    <el-button
      type="primary"
      size="small"
      class="company-edit"
      v-hasPermi="['organization:company:edit']"
      @click="handleEdit"
      plain
    >编辑
    </el-button
    >
    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="open" width="1000px" append-to-body class="my-dialog"
               :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="10em">
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="form-title">基本信息</div>
            <el-form-item label="LOGO： " prop="name">
              <!--              <image-upload v-model="form.logo" :limit="1" :isShowTip="false"/>-->
              <div class="text-center">
                <div class="user-info-head" @click="editCropper()"><img v-bind:src="form.logo" title="点击上传头像"
                                                                        class="img-circle img-lg"/></div>
              </div>
            </el-form-item>
            <el-form-item label="公司全称： " prop="name">
              <el-input v-model="form.name" placeholder="请输入角色名称"/>
            </el-form-item>
            <!-- <el-form-item label="" prop="roleName">
              <ImageUpload />
            </el-form-item> -->
            <el-form-item label="成立时间：" prop="regTime">
              <el-date-picker
                v-model="form.regTime"
                class="w100"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择成立时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="法人代表：" prop="legalPerson">
              <el-input
                v-model="form.legalPerson"
                placeholder="请输入法人代表"
              />
            </el-form-item>
            <!--            <el-form-item label="" prop="legalPic">-->
            <!--              <ImageUpload-->
            <!--                v-model="form.legalPic"-->
            <!--                :limit="1"-->
            <!--                :isShowTip="false"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <el-form-item label="法人电话： " prop="legalPhone">
              <el-input
                v-model="form.legalPhone"
                maxlength="11"
                placeholder="请输入法人电话"
              />
            </el-form-item>
            <el-form-item label="企业类型： " prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择企业类型："
                class="w100"
                clearable
              >
                <el-option
                  v-for="dict in dict.type.sys_company_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="注册资金： " prop="capital">
              <el-input v-model="form.capital" placeholder="请输入注册资金"/>
            </el-form-item>
            <el-form-item label="营业执照： " prop="license">
              <FileUpload
                v-model="form.license"
                :fileType="['pdf', 'jpg', 'png']"
              />
            </el-form-item>
            <el-form-item label="统一社会信用代码： " prop="creditCode">
              <el-input
                v-model="form.creditCode"
                maxlength="18"
                show-word-limit
                placeholder="请输入统一社会信用代码"
              />
            </el-form-item>
            <el-form-item label="公司介绍： " prop="description">
              <el-input
                v-model="form.description"
                type="textarea"
                maxlength="2000"
                show-word-limit
                placeholder="请输入公司介绍"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="form-title">开票信息</div>
            <el-form-item label="发票抬头：" prop="invoiceTtitle">
              <el-input
                v-model="form.invoiceTtitle"
                maxlength="100"
                show-word-limit
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="税务编号：" prop="invoiceCode">
              <el-input
                v-model="form.invoiceCode"
                maxlength="100"
                show-word-limit
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="单位地址：" prop="address">
              <el-input
                v-model="form.address"
                maxlength="100"
                show-word-limit
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="开户银行：" prop="bankName">
              <el-input
                v-model="form.bankName"
                maxlength="100"
                show-word-limit
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="银行账户：" prop="bankCode">
              <el-input
                v-model="form.bankCode"
                maxlength="100"
                show-word-limit
                placeholder="请输入"
              />
            </el-form-item>
            <!--            <el-form-item label="备注内容：" prop="invoiceRemark">-->
            <!--              <el-input-->
            <!--                v-model="form.invoiceRemark"-->
            <!--                maxlength="100"-->
            <!--                show-word-limit-->
            <!--                placeholder="请输入"-->
            <!--              />-->
            <!--            </el-form-item>-->
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" size="small" plain>确 定</el-button>
        <el-button @click="cancel" size="small" plain>取 消</el-button>
      </div>
    </el-dialog>
    <companyAddress :visible.sync="mapVisible" :info="info" @mapChange="mapChange"></companyAddress>
    <cropperIndex :visible.sync="openCropper" :logo="form.logo" @getImage="getImage"></cropperIndex>
    <MapArea :visible.sync="mapAreaVisible" :form="info" @getPoint="getChangeMapArea"></MapArea>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {getCompanyDetial, saveCompanyDetial} from '@/api/system/user'
import {deepClone} from '@/utils'
import companyAddress from "@/components/MapArea/companyAddress";
import cropperIndex from "@/components/cropper"
import MapArea from "@/components/MapArea"

export default {
  name: "CompanyIndex",
  dicts: ['sys_company_type'],
  components: {companyAddress, cropperIndex, MapArea},
  data() {
    return {
      // 遮罩层
      loading: false,
      info: {},
      open: false,
      form: {},
      rules: {
        legalPhone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      },
      pointData: null,
      mapVisible: false,
      openCropper: false,
      mapAreaVisible: false,
    };
  },
  computed: {
    ...mapGetters([
      'avatar'
    ]),
  },
  created() {
    this.getCompanyDetial()
  },
  methods: {
    createMap() {
      const that = this
      this.aMap = new AMap.Map('companyMap', {
        mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
        resizeEnable: true,
        center: that.info.lon ? [that.info.lon, that.info.lat] : that.$MapCenter,
        zoom: that.info.lon ? 16 : that.$MapZoom
      })
      this.geocoder = new AMap.Geocoder({
        city: "010", //城市设为北京，默认：“全国”
        radius: 1000 //范围，默认：500
      });
      this.marker = new AMap.Marker();
      this.aMap.add(that.marker);
      if (this.info.lon) {
        this.marker.setPosition([parseFloat(that.info.lon), parseFloat(that.info.lat)]);
      }
      if (this.info.rangePoints) {
        this.getPoint(this.info.rangePoints)
      }
    },
    mapChange() {
      this.getCompanyDetial('init')
    },
    /** 查询授权用户列表 */
    getCompanyDetial(option) {
      let that = this
      this.loading = true;
      getCompanyDetial().then(res => {
          this.info = res.data || {}
          this.loading = false;
          if (option == 'init') {
            if (parseFloat(that.info.lon)) {
              that.aMap.add(that.marker);
              that.marker.setPosition([parseFloat(that.info.lon), parseFloat(that.info.lat)]);
              that.aMap.setCenter([parseFloat(that.info.lon), parseFloat(that.info.lat)])
              that.aMap.setZoom(16)
            }
            if(res.data.rangePoints){
              this.getPoint()
            }
          } else {
            this.$nextTick(() => {
              that.createMap()
            })
          }
        }
      )
    },
    handleDownFile(url) {

    },
    handleEdit() {
      this.open = true
      this.form = deepClone(this.info)
    },
    cancel() {
      this.open = false
    },
    submitForm(option) {
      saveCompanyDetial({...this.form, id: this.info.id}).then(res => {
        this.$modal.msgSuccess("提交成功")
        this.info = deepClone(this.form)
        this.getCompanyDetial(option)
        this.$store.dispatch('GetCompanyInfo').then(() => {
        })
        this.open = false
      })
    },
    // 编辑头像
    editCropper() {
      this.openCropper = true;
    },
    getImage(image) {
      this.form.logo = image
    },
    showMapArea() {
      this.mapAreaVisible = true
    },
    getChangeMapArea(item){
      console.log('item:', item)
      this.form.rangePoints = item
      this.submitForm('init')
    },
    getPoint(item) {
      // 获取到的坐标
      console.log('item:', item)
      if (this.polyline) {
        this.aMap.remove(this.polyline)
      }
      let polygonArray;
      polygonArray = JSON.parse(this.info.rangePoints); //构建多边形经纬度坐标数组
      let arr = [];
      for (let j = 0; j < polygonArray.length; j++) {
        let ob = polygonArray[j];
        arr.push(new AMap.LngLat(ob.lng, ob.lat));
      }
      let zIndex = 10;
      this.polyline = new AMap.Polygon({
        map: this.map,
        path: arr,
        zIndex: zIndex,
        strokeColor: "#555",
        strokeOpacity: 0.5,
        strokeWeight: 1.5,
        // fillColor: strokeColor,
        fillOpacity: 0.35
      });
      this.polyline.setMap(this.aMap);
      // this.form.rangePoints = item
    }
  }
}
</script>
<style lang="scss" scoped>
.company {
  position: relative;
}

.company-session {
  margin-bottom: 32px;

  &__title {
    color: #010101;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
  }
}

.company-info {
  display: flex;
  display: -webkit-flex;

  &__lt {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 24px;

    .user-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }

  &__rt {
    flex: 1;
    min-width: 0;

    .company-item {
      width: 150px;
    }
  }

  &__title {
    color: #000;
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    margin-bottom: 24px;
  }

  &__content {
    display: flex;
    display: -webkit-flex;
  }
}

.company-item {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-right: 10px;

  &__label {
    margin-bottom: 12px;
    color: #656565;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
  }
}

.company-invoice {
  display: flex;
  display: -webkit-flex;
  margin-bottom: 32px;
  max-width: 980px;
  flex-wrap: wrap;

  &:last-child {
    margin-bottom: 0;
  }

  .company-item {
    // margin-right: 152px;
    width: 260px;

    &:nth-child(3n) {
      // margin-right: 160px;
    }
  }
}

.download-btn {
  line-height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: #f5f5f5;
  color: #909090;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  display: inline-block;
}

.company-edit {
  position: absolute;
  top: 20px;
  right: 20px;
}

.form-title {
  color: #010101;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.map-box {
  height: 300px;
  width: 100%;
  background: #f4f4f4;
}

.points-map {
  height: 300px;
  width: 100%;
}

.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

.user-info-head:hover:after {
  content: '+';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}
</style>
